<template>
  <el-card class="mg-lg icon_card">
    <div class="icon_box">
      <div
        class="icon_item"
        v-for="(item, index) in list"
        :key="index"
        @click="handleIconClick"
      >
        <div class="icon_svg">
          <component size="20" :is="item"></component>
        </div>
        <div class="icon_title">{{ item }}</div>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import * as Icon from "@element-plus/icons-vue";
import { ref } from "vue";
const list = ref(Object.keys(Icon));
const handleIconClick = async (item) => {
   
};
</script>
<style lang="less" scoped>
.icon_card {
  .icon_box {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-gap: 8px;
    .icon_item {
      width: 100px;
      height: 90px;
      border: 1px solid var(--el-border-color);
      color: var(--el-text-color-regular);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      cursor: pointer;
      &:hover{
        background: #F2F6FC;
      }
      .icon_svg {
        height: 30px;
        width: 30px;
      }
      .icon_title {
        font-size: 8px;
        margin-top: 8px;
        text-align: center;
        width: 95%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
